<template>
  <div>
    <article class="innerPage bookList">
      <header class="breadcrumb">
        <x-breadcrumb :path="$route.path" :title="$route.meta.breadcrumb" :startIndex="$route.meta.startIndex">
        </x-breadcrumb>
      </header>
      <section class="graphical">
        <SearchCondition
          :formItemList="formItemList"
          :emitSearch="emitSearch"
          :resetSearch="resetSearch"
          @search="search"
          ref="mychild"
        />
      </section>
      <div class="decorate"></div>
      <section class="graphical2">
        <div class="btn_add">
          <el-button icon="el-icon-circle-plus-outline" class="btn-green icon-fontSize" @click="addBtn" v-alive
            >添加</el-button
          >
          <p class="pour-p">配置后，前台应用会根据配置时间，显示成灰色</p>
        </div>
        <div>
          <el-table
            :data="tableData"
            class="tableStyle"
            :header-cell-style="$headerCellStyle"
            :border="$isborder"
            border
            size="mini"
            ref="elTable"
            stripe
          >
            <el-table-column prop="key" label="序号" label-class-name="indexColumn" :width="$widtha" align="center" fixed="left" />
            <el-table-column prop="name" label="事件名称" align="left" :min-width="$widthb" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="时间" :width="170" align="left">
              <template slot-scope="scope">
                <div v-show="scope.row.start_time">
                  <div class="formtime-box">
                    <el-tooltip class="item" effect="dark" content="开始时间" placement="top">
                      <img src="@/assets/img2/startTime.png" alt="" srcset="" />
                    </el-tooltip>
                    <p>{{ scope.row.start_time }}</p>
                  </div>
                  <div class="formtime-box">
                    <el-tooltip class="item" effect="dark" content="结束时间" placement="bottom">
                      <img src="@/assets/img2/endTime.png" alt="" srcset="" />
                    </el-tooltip>
                    <p>{{ scope.row.end_time }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="manage_name" label="添加账号" align="left" :width="$widthb" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="create_time" label="添加时间" align="left" :width="$widthb" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" :width="160" fixed="right" :header-align="$heaerOpt">
              <template slot-scope="{ row }">
                <div class="btnFrom-box">
                  <div class="details-box" @click="editBtn(row)" v-alive>修改</div>
                  <div class="delete-box" @click="deleBtn(row.id)" v-alive><span></span> 删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <footer class="pagination">
        <div>
          <el-pagination
            background
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :total="listTotal"
            :page-size="10"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
          >
          </el-pagination>
          
        </div>
        <p>
          共
          <span>{{ listTotal || 0 }}</span>
          数据
        </p>
      </footer>
    </article>
    <addTypepup ref="isAdd" @ongetList="getList"></addTypepup>
    <!-- 删除 -->
    <DeletetkPage ref="isdel" @deletesuccess="getmanDel"></DeletetkPage>
  </div>
</template>

<script>
import addTypepup from "./compontents/addTypepup.vue"
export default {
  components: { addTypepup },
  data() {
    return {
      formItemList: [
        {
          label: "选择时间",
          type: "dateRange",
          param1: "start_time",
          param2: "end_time",
          placeholder: "活动开始时间",
        },
        {
          label: "关键词",
          type: "input",
          param: "keywords",
        },
      ],
      emitSearch: false,
      resetSearch: true,
      tableData: [],
      page: 1,
      listTotal: 0,
      currentPage1: 1,
      searchList: {
        keywords: "", //筛选条件 名称和编号
        end_time: "",
        start_time: "",
      },
    }
  },

  mounted() {},
  activated() {
    if (this.$route.params.action == "refresh" || this.$isFirstInPage.get()) {
      this.getList()
    }
    this.setPageTabs()
  },
  computed: {},
  methods: {
    //获取数据
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/appViewGray/list",
          method: "get",
          loading: true,
          data: {
            page: this.page,
            limit: 10,
            ...this.searchList,
          },
        })
        if (res) {
          this.tableData = res.content.data
          this.listTotal = res.content.total
          this.currentPage1 = res.content.current_page
        }
      } catch (err) {
        let error = err.message.split("/")
        if (error[0] == 203) {
          this.tableData = []
          this.listTotal = 0
        }
        this.errorHandler(err)
      }
    },
    //分页
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    // 搜索条件改变时
    search(params) {
      this.searchList.keywords = params.keywords
      this.searchList.end_time = params.end_time
      this.searchList.start_time = params.start_time
      this.page = 1
      this.getList()
    },
    // 添加类型
    addBtn() {
      this.$refs.isAdd.showModal()
    },
    // 修改类型
    editBtn(row) {
      this.$refs.isAdd.showModal({
        rowData: JSON.parse(JSON.stringify(row)),
      })
    },
    // 点击删除
    deleBtn(id) {
      this.$refs.isdel.delshow(id)
    },
    async getmanDel(id) {
      try {
        let res = await this.request({
          url: "/admin/appViewGray/del",
          method: "post",
          loading: true,
          data: {
            id: id,
          },
        })
        if (res) {
          this.$message({
            type: "success",
            message: "删除成功!",
          })
          this.getList()
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
